<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<html>
<head>
    <title>订单商品管理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container mt-4">
    <h2>订单商品管理</h2>
    <div class="mb-2">
        <a :href="'/orderItem/add/' + orderId" class="btn btn-success">新增订单商品</a>
        <input v-model="search" class="form-control d-inline-block w-25 ml-3" placeholder="搜索商品ID">
        <a :href="'/order/list'" class="btn btn-secondary ml-2">返回订单列表</a>
    </div>
    <table class="table table-bordered table-hover">
        <thead class="thead-light">
        <tr>
            <th>ID</th>
            <th>订单ID</th>
            <th>商品ID</th>
            <th>数量</th>
            <th>单价</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="oi in filteredOrderItems" :key="oi.id">
            <td>{{oi.id}}</td>
            <td>{{oi.orderId}}</td>
            <td>{{oi.productId}}</td>
            <td>{{oi.quantity}}</td>
            <td>{{oi.price}}</td>
            <td>
                <a :href="'/orderItem/edit/' + oi.id" class="btn btn-sm btn-primary">编辑</a>
                <a :href="'/orderItem/delete/' + oi.id + '/' + orderId" class="btn btn-sm btn-danger ml-1" onclick="return confirm('确定删除？')">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var orderItemsData = JSON.parse('<%= request.getAttribute("orderItems") == null ? "[]" : JSON.toJSONString(request.getAttribute("orderItems")) %>');
    var orderIdData = '<%= request.getAttribute("orderId") == null ? "0" : request.getAttribute("orderId") %>';
    new Vue({
        el: '#app',
        data: {
            search: '',
            orderItems: orderItemsData,
            orderId: orderIdData
        },
        computed: {
            filteredOrderItems() {
                if (!this.search) return this.orderItems;
                return this.orderItems.filter(function(oi){ return oi.productId && oi.productId.toString().indexOf(this.search) !== -1; }.bind(this));
            }
        }
    });
</script>
</body>
</html> 